<template>
  <div>
    <h1>第一个组件</h1>
    <h1>state:{{ $store.state.count }}</h1>
    <h1>getters:{{ $store.getters.gcount }}</h1>
    <button @click="changeState">用mutations改变state</button>
    <button @click="actionState">用actions触发改变state</button>
    <hr />
    <h1>{{ $store.state.cartStore.cartname }}</h1>
    <!-- <h1>{{ cnames }}</h1> -->
    <!-- <h1>{{ $store.getters.cartStore.cartnames }}</h1> -->
    <button @click="changeData">分模块的方法</button>
    <button @click="cartAction('阿里巴巴')">改变</button>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('cartStore', ['cartnames'])
  },
  methods: {
    //
    ...mapActions('cartStore', ['cartAction']),
    changeState () {
      this.$store.commit('changeCount', 5)
    },
    actionState () {
      this.$store.dispatch('countAction', 10)
    },
    changeData () {
      this.$store.commit('cartStore/changeCart', '百度')
    }
  }
}
</script>
<style lang="less"></style>
